<template><div>
                <div class="content__inner">
                    <header class="content__title">
                        <h1>Pricing Tables - 1</h1>
                        <small>3 Column with highlighted item</small>
                    </header>

                    <div class="row price-table price-table--highlight">
                        <div class="col-md-4">
                            <div class="price-table__item">
                                <header class="price-table__header bg-teal">
                                    <div class="price-table__title">Strawberry</div>
                                    <div class="price-table__desc">Pellentesque ornare lacinia venenatis vestibulum</div>
                                </header>
                                <div class="price-table__price color-teal">
                                    $124.90 |
                                    <small>month</small>
                                </div>
                                <ul class="price-table__info">
                                    <li>In dapibus ipsum sit amet leo</li>
                                    <li>Vestibulum ut mauris tellus donec</li>
                                    <li>Purna lectus venenatis felis nonsemper</li>
                                    <li>Aliquam erat volutpat hasellus ultri</li>
                                </ul>
                                <a href="" class="price-table__action bg-teal">Select Plan</a>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="price-table__item price-table__item--popular">
                                <header class="price-table__header bg-blue">
                                    <div class="price-table__title">Raspberry</div>
                                    <div class="price-table__desc">Nullam dolor nibh ultricies vehicula utelit ornaresred</div>
                                </header>
                                <div class="price-table__price color-blue">
                                    $250.00 |
                                    <small>month</small>
                                </div>
                                <ul class="price-table__info">
                                    <li>Morbi leo risus porta acconseetur</li>
                                    <li>Nullam quis risus eget urna mollis ornare</li>
                                    <li>Purna lectus venenatis felis nonsemper</li>
                                    <li>Aenean ellentesque ornare sem lacinia</li>
                                </ul>
                                <a href="" class="price-table__action bg-blue">Select Plan</a>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="price-table__item">
                                <header class="price-table__header bg-purple">
                                    <div class="price-table__title">Cranberry</div>
                                    <div class="price-table__desc">Vivamus sagittis lacus augue laoreet rutrum faucibus</div>
                                </header>
                                <div class="price-table__price color-purple">
                                    $124.90 |
                                    <small>month</small>
                                </div>
                                <ul class="price-table__info">
                                    <li>Duis mollis estnon commodo luctus</li>
                                    <li>Vivamus sagittis lacus augue laoreeterest</li>
                                    <li>Etiam porta malesuada mollis euismod</li>
                                    <li>Praesent commodo magnanisl consec</li>
                                </ul>
                                <a href="" class="price-table__action bg-purple">Select Plan</a>
                            </div>
                        </div>
                    </div>

                    <br/>
                    <br/>

                    <header class="content__title">
                        <h1>Pricing Tables - 2</h1>
                        <small>Basic 3 column pricing table</small>
                    </header>

                    <div class="row price-table price-table--basic">
                        <div class="col-md-4">
                            <div class="price-table__item">
                                <header class="price-table__header bg-light-blue">
                                    <div class="price-table__title">Strawberry</div>
                                    <div class="price-table__desc">Pellentesque ornare lacinia venenatis vestibulum</div>
                                </header>
                                <div class="price-table__price color-light-blue">
                                    $124.90 |
                                    <small>month</small>
                                </div>
                                <ul class="price-table__info">
                                    <li>In dapibus ipsum sit amet leo</li>
                                    <li>Vestibulum ut mauris tellus donec</li>
                                    <li>Purna lectus venenatis felis nonsemper</li>
                                    <li>Aliquam erat volutpat hasellus ultri</li>
                                </ul>
                                <a href="" class="price-table__action bg-light-blue">Select Plan</a>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="price-table__item">
                                <header class="price-table__header bg-red">
                                    <div class="price-table__title">Raspberry</div>
                                    <div class="price-table__desc">Nullam dolor nibh ultricies vehicula utelit ornaresred</div>
                                </header>
                                <div class="price-table__price color-red">
                                    $250.00 |
                                    <small>month</small>
                                </div>
                                <ul class="price-table__info">
                                    <li>Morbi leo risus porta acconseetur</li>
                                    <li>Nullam quis risus eget urna mollis ornare</li>
                                    <li>Purna lectus venenatis felis nonsemper</li>
                                    <li>Aenean ellentesque ornare sem lacinia</li>
                                </ul>
                                <a href="" class="price-table__action bg-red">Select Plan</a>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="price-table__item">
                                <header class="price-table__header bg-purple">
                                    <div class="price-table__title">Cranberry</div>
                                    <div class="price-table__desc">Vivamus sagittis lacus augue laoreet rutrum faucibus</div>
                                </header>
                                <div class="price-table__price color-purple">
                                    $124.90 |
                                    <small>month</small>
                                </div>
                                <ul class="price-table__info">
                                    <li>Duis mollis estnon commodo luctus</li>
                                    <li>Vivamus sagittis lacus augue laoreeterest</li>
                                    <li>Etiam porta malesuada mollis euismod</li>
                                    <li>Praesent commodo magnanisl consec</li>
                                </ul>
                                <a href="" class="price-table__action bg-purple">Select Plan</a>
                            </div>
                        </div>
                    </div>

                    <br/>
                    <br/>

                    <header class="content__title">
                        <h1>Pricing Tables - 3</h1>
                        <small>Basic 4 column pricing table</small>
                    </header>

                    <div class="row price-table price-table--basic">
                        <div class="col-md-3">
                            <div class="price-table__item">
                                <header class="price-table__header bg-light-blue">
                                    <div class="price-table__title">Strawberry</div>
                                    <div class="price-table__desc">Pellentesque ornare lacinia venenatis vestibulum</div>
                                </header>
                                <div class="price-table__price color-light-blue">
                                    $899.90 |
                                    <small>month</small>
                                </div>
                                <ul class="price-table__info">
                                    <li>In dapibus ipsum sit amet leo</li>
                                    <li>Vestibulum ut mauris tellus donec</li>
                                    <li>Purna lectus venenatis felis nonsemper</li>
                                    <li>Aliquam erat volutpat hasellus ultri</li>
                                </ul>
                                <a href="" class="price-table__action bg-light-blue">Select Plan</a>
                            </div>
                        </div>

                        <div class="col-md-3">
                            <div class="price-table__item">
                                <header class="price-table__header bg-red">
                                    <div class="price-table__title">Raspberry</div>
                                    <div class="price-table__desc">Nullam dolor nibh ultricies vehicula utelit ornaresred</div>
                                </header>
                                <div class="price-table__price color-red">
                                    $250.00 |
                                    <small>month</small>
                                </div>
                                <ul class="price-table__info">
                                    <li>Morbi leo risus porta acconseetur</li>
                                    <li>Nullam quis risus eget urna mollis ornare</li>
                                    <li>Purna lectus venenatis felis nonsemper</li>
                                    <li>Aenean ellentesque ornare sem lacinia</li>
                                </ul>
                                <a href="" class="price-table__action bg-red">Select Plan</a>
                            </div>
                        </div>

                        <div class="col-md-3">
                            <div class="price-table__item">
                                <header class="price-table__header bg-purple">
                                    <div class="price-table__title">Cranberry</div>
                                    <div class="price-table__desc">Vivamus sagittis lacus augue laoreet rutrum faucibus</div>
                                </header>
                                <div class="price-table__price color-purple">
                                    $899.90 |
                                    <small>month</small>
                                </div>
                                <ul class="price-table__info">
                                    <li>Duis mollis estnon commodo luctus</li>
                                    <li>Vivamus sagittis lacus augue laoreeterest</li>
                                    <li>Etiam porta malesuada mollis euismod</li>
                                    <li>Praesent commodo magnanisl consec</li>
                                </ul>
                                <a href="" class="price-table__action bg-purple">Select Plan</a>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="price-table__item">
                                <header class="price-table__header bg-cyan">
                                    <div class="price-table__title">Strawberry</div>
                                    <div class="price-table__desc">Pellentesque ornare lacinia venenatis vestibulum</div>
                                </header>
                                <div class="price-table__price color-cyan">
                                    $899.90 |
                                    <small>month</small>
                                </div>
                                <ul class="price-table__info">
                                    <li>In dapibus ipsum sit amet leo</li>
                                    <li>Vestibulum ut mauris tellus donec</li>
                                    <li>Purna lectus venenatis felis nonsemper</li>
                                    <li>Aliquam erat volutpat hasellus ultri</li>
                                </ul>
                                <a href="" class="price-table__action bg-cyan">Select Plan</a>
                            </div>
                        </div>
                    </div>
                </div>

                
            </div></template>